<template>
	<el-drawer v-model="visible"
	           :before-close="handleClose"
	           size="420px"
	>
		<template #header>
			<div class="title-container">
				<div class="title">{{ currentNews['news_title'] }}</div>
			</div>
		</template>
		<template #default>
			<div class="body-container">
				<el-form ref="formRef"
				         :rules="rules"
				         :model="ruleForm"
				         hide-required-asterisk
				         status-icon
				>
					<el-form-item label="新闻标题" prop="title">
						<el-input placeholder="请输入新闻标题..." v-model="ruleForm.title"/>
					</el-form-item>
					<el-form-item label="新闻介绍" prop="desc">
						<el-input type="textarea"
						          rows="4"
						          v-model="ruleForm.desc"
						          placeholder="请输入新闻介绍..."/>
					</el-form-item>
					<el-form-item label="新闻日期" prop="date">
						<el-date-picker
								type="date"
								v-model="ruleForm.date"
								placeholder="请选择日期"
								size="default"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
						/>
					</el-form-item>
					<el-form-item label="新闻分类" prop="category">
						<el-select v-model="ruleForm.category"
						           placeholder="请选择新闻分类..."
						>
							<el-option v-for="item of selectOptions"
							           :key="item.id"
							           :label="item.label"
							           :value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="预览图" prop="imgSrc">
						<upload-vue :img-src="ruleForm.imgSrc"
						            @uploadFile="uploadPreviewHandler"
						/>
					</el-form-item>
				</el-form>
			</div>
		</template>
		<template #footer>
			<div class="footer-container">
				<el-button type="info">取 消</el-button>
				<el-button type="primary" @click="confirmHandler">修 改</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
import useUploadConf from "@/hook/useUploadConf";
import UploadVue from '@/libs/upload/index'
import {ref, watch, computed} from 'vue'
import {updateDetail} from "@/api/news";

const {
	rules,
	ruleForm,
	selectOptions,
	initRuleForm,
	uploadPreviewHandler,
} = useUploadConf()

const formRef = ref(null)

const props = defineProps({
	currentNews: {
		type: Object,
		required: true
	},
	modelValue: {
		type: Boolean,
		required: true
	}
})
const emits = defineEmits(['update:modelValue', 'updateSuccess'])

const visible = computed({
	get: () => props.modelValue,
	set: (val) => emits('update:modelValue', val)
})

watch(() => props.currentNews, val => {
	const {news_title: title, news_desc: desc, preview: imgSrc, news_time: date, category_id} = val
	initRuleForm({title, desc, imgSrc, date, category: category_id})
})

const confirmHandler = async () => {
	await formRef.value.validate(async (flag) => {
		if (!flag) return
		const {id, news_id, preview} = props.currentNews
		const {
			title,
			imgSrc,
			desc,
			date,
			category,
		} = ruleForm.value
		const {success, news} = await updateDetail({
			id,
			newsId: news_id,
			title,
			desc,
			date,
			preview: imgSrc,
			oldImg: preview === imgSrc ? null : preview,
			category,
		})
		if (!success) return
		emits('updateSuccess', news)
	})
}

const handleClose = () => {
	visible.value = false
}
</script>

<style scoped lang="scss">

.title-container {
	.title {
		max-width: 220px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>